<template>
    <div class="main">
        <div class="top-bar">
            <div class="query" style="float: left;float: left;margin-top: 16px;margin-left: 20px;">
                <hu-button value="新增" size="max" />
            </div>
            <div class="query" style="float: right;margin-top: 16px;margin-right: 20px;">
                <hu-button value="查询" size="max" />
            </div>
            <div style="width: 50%; float: right;">
                <hu-input v-model="tableName" title="" />
            </div>
            
        </div>
        <div class="content-box">
            <div style="height: 100%; width: 100%;">
                <span v-for="item in 2000" class="cards">哈哈哈哈</span>
            </div>
        </div>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
export default {
    name: '基于模板的SQL生成',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {

        }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
        test(index) {
            let txt = '哈'
            for(let i = 0; i < index; i++) {
                txt = txt + '哈'
            }
            return txt
        }
    },
}
</script>
<style lang="scss" scoped>
.main{
    box-sizing: unset;
    position: relative;
}
.top-bar{
    width: 100%;
    height: 55px;
    background-color: #1f242e; 
    box-shadow: 0 0 10px rgb(10, 18, 32); 
    overflow: hidden;
}
.content-box{
    height: calc(100% - 60px); 
    margin-top: 5px; 
    overflow: scroll;
}

/*整个滚动条*/
.content-box::-webkit-scrollbar {
    width: 3px;
    height: 0px;
}
/*滑块*/
.content-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-osx-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.5);
}
/*滑块的轨道*/
.content-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    -moz-osx-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
}

.cards{
    cursor: pointer;
    user-select: none;
    display: inline-block;
    min-width: 180px;
    line-height: 35px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255,0.45);
    background-color: #1e2430;
    border: 1px solid #2a2f39;
    border-radius: 3px;
    margin: 3px 3px;
    padding: 0 10px;
    transition: 0.3s;
}
.cards:hover {
    background-color: #171d27;
    color: rgba(255, 255, 255,0.7);
}
</style>